<template>
  <div class="car">
    <div v-for="item in hotelInfo">
      <router-link to="/detailInfo" class="car-data">
        <div class="car-data-img">
          <img src="../assets/bgLoading.png" v-lazyload="item.imgUrl"/>
        </div>
        <div class="car-info">
          <div class="car-data-name">{{item.name}}</div>
          <div>
            <span class="car-info-score">{{item.score}}分</span>
            <span class="car-data-font">{{item.commentNum}}条评论</span>
          </div>
          <div class="car-data-font">{{item.address}}</div>
          <div class="car-data-price">租车价&nbsp;¥{{item.price}}元</div>
        </div>
      </router-link>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import bottom  from '../components/bottom.vue';
  export default {
    name: '专车',
    components:{
      'bottom' :　bottom
    },
    methods:{

    },
    data () {
      return {
        hotelInfo:[
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'128',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'138',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'148',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'158',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'168',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'178',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://c1.xinstatic.com/f1/20170516/2032/591af14352ac1329252_18.jpg',name:'宝马',price:'188',address:'288人消费',score:'4.8',commentNum:'150'},
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../commomCss/comomCss";
  .car{
    .car-data{
      display: flex;
      margin: torem(10px);
      .car-data-img{
        background-image: url('../assets/bgLoading.png');
        background-size: torem(180px) torem(130px);
        background-repeat: no-repeat;
        background-position: center;
        img{
          width: torem(180px);
          height: torem(130px);
        }
      }
    }
    .car-info{
      font-size: torem(18px);
      padding-left: torem(10px);
      flex: 1;
      .car-data-name{
        font-size: torem(20px);
        color: #333;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 90%;
      }
      div{
        text-align: left;
        padding: torem(5px) 0;
        .car-info-score{
          color: red;
        }
      }
      .car-data-price{
        color: #06c1ae;
      }
      .car-data-font{
        color: #8c8c8c
      }
    }
  }
</style>
